<template>
    <div class="weather-display">
        <!-- 加载状态 -->
        <div v-if="!weatherData || !weatherData.city" class="loading-state">
            <div class="loading-spinner">⏳</div>
            <div class="loading-text">正在加载天气数据...</div>
        </div>

        <!-- 天气卡片 -->
        <div v-else class="weather-card">
            <!-- 城市选择器 -->
            <div class="city-selector">
                <div class="city-input-group">
                    <input v-model="selectedCity" @keyup.enter="changeCity" placeholder="输入城市名称" class="city-input" />
                    <button @click="changeCity" class="change-city-btn">
                        🔍 切换城市
                    </button>
                </div>
                <div class="current-city-display">
                    <span class="city-icon">📍</span>
                    <span class="city-name">{{ weatherData.city }}</span>
                    <span class="last-updated">更新时间: {{ formatDateTime(weatherData.lastUpdated) }}</span>
                </div>
            </div>

            <!-- 主要天气信息区域 -->
            <div class="weather-main-section">
                <!-- 左侧：温度和天气图标 -->
                <div class="weather-left">
                    <div class="weather-icon-large" :class="getWeatherIconClass(weatherData.current?.text || '')">
                        {{ getWeatherIcon(weatherData.current?.text || '') }}
                    </div>
                    <div class="temp-section">
                        <div class="temp-value">{{ weatherData.current?.temp }}°C</div>
                        <div class="feels-like">体感温度: {{ getFeelsLikeTemp() }}°C</div>
                        <div class="weather-text">{{ weatherData.current?.text }}</div>
                    </div>
                </div>

                <!-- 右侧：天气详情 -->
                <div class="weather-right">
                    <div class="weather-details">
                        <div class="detail-item">
                            <div class="detail-icon">💧</div>
                            <div class="detail-content">
                                <div class="detail-label">湿度</div>
                                <div class="detail-value">{{ weatherData.current?.humidity }}%</div>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-icon">💨</div>
                            <div class="detail-content">
                                <div class="detail-label">风速</div>
                                <div class="detail-value">{{ weatherData.current?.windSpeed }} m/s</div>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-icon">🧭</div>
                            <div class="detail-content">
                                <div class="detail-label">风向</div>
                                <div class="detail-value">{{ weatherData.current?.windDir }}</div>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-icon">📊</div>
                            <div class="detail-content">
                                <div class="detail-label">气压</div>
                                <div class="detail-value">{{ weatherData.current?.pressure }} hPa</div>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-icon">👁️</div>
                            <div class="detail-content">
                                <div class="detail-label">能见度</div>
                                <div class="detail-value">{{ weatherData.current?.vis }} km</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 天气详情 -->
            <div class="weather-details">
                <div class="detail-item">
                    <div class="detail-icon">💧</div>
                    <div class="detail-content">
                        <div class="detail-label">湿度</div>
                        <div class="detail-value">{{ weatherData.current?.humidity }}%</div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">💨</div>
                    <div class="detail-content">
                        <div class="detail-label">风速</div>
                        <div class="detail-value">{{ weatherData.current?.windSpeed }} m/s</div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">🧭</div>
                    <div class="detail-content">
                        <div class="detail-label">风向</div>
                        <div class="detail-value">{{ weatherData.current?.windDir }}</div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">📊</div>
                    <div class="detail-content">
                        <div class="detail-label">气压</div>
                        <div class="detail-value">{{ weatherData.current?.pressure }} hPa</div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">👁️</div>
                    <div class="detail-content">
                        <div class="detail-label">能见度</div>
                        <div class="detail-value">{{ weatherData.current?.vis }} km</div>
                    </div>
                </div>
            </div>

            <!-- 天气指数 -->
            <div class="weather-indices" v-if="enhancedData">
                <h3 class="indices-title">天气指数</h3>
                <div class="indices-grid">
                    <div class="index-card air-quality" :class="getAirQualityClass()">
                        <div class="index-icon">🌬️</div>
                        <div class="index-content">
                            <div class="index-name">空气质量</div>
                            <div class="index-value">{{ enhancedData.AirQuality?.AQI || '--' }}</div>
                            <div class="index-level">{{ enhancedData.AirQuality?.Level || '--' }}</div>
                        </div>
                    </div>
                    <div class="index-card uv-index" :class="getUVIndexClass()">
                        <div class="index-icon">☀️</div>
                        <div class="index-content">
                            <div class="index-name">紫外线指数</div>
                            <div class="index-value">{{ enhancedData.UVIndex?.Index || '--' }}</div>
                            <div class="index-level">{{ enhancedData.UVIndex?.Level || '--' }}</div>
                        </div>
                    </div>
                    <div class="index-card comfort-index">
                        <div class="index-icon">😊</div>
                        <div class="index-content">
                            <div class="index-name">舒适度</div>
                            <div class="index-value">{{ enhancedData.LifeIndices?.Comfort || '--' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 生活指数 -->
            <div class="life-indices" v-if="enhancedData">
                <h3 class="indices-title">生活建议</h3>
                <div class="indices-grid">
                    <div class="index-card">
                        <div class="index-icon">👕</div>
                        <div class="index-content">
                            <div class="index-name">穿衣建议</div>
                            <div class="index-advice">{{ enhancedData.LifeIndices?.Clothing || '暂无建议' }}</div>
                        </div>
                    </div>
                    <div class="index-card">
                        <div class="index-icon">🏃</div>
                        <div class="index-content">
                            <div class="index-name">运动建议</div>
                            <div class="index-advice">{{ enhancedData.LifeIndices?.Exercise || '暂无建议' }}</div>
                        </div>
                    </div>
                    <div class="index-card">
                        <div class="index-icon">☔</div>
                        <div class="index-content">
                            <div class="index-name">雨伞建议</div>
                            <div class="index-advice">{{ enhancedData.LifeIndices?.Umbrella || '暂无建议' }}</div>
                        </div>
                    </div>
                    <div class="index-card">
                        <div class="index-icon">🚗</div>
                        <div class="index-content">
                            <div class="index-name">洗车建议</div>
                            <div class="index-advice">{{ enhancedData.LifeIndices?.CarWash || '暂无建议' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 7天预报 -->
            <div class="forecast-section" v-if="weatherData.forecast && weatherData.forecast.length > 0">
                <h3 class="forecast-title">7天预报</h3>
                <div class="forecast-grid">
                    <div v-for="(day, index) in weatherData.forecast.slice(0, 7)" :key="index" class="forecast-day">
                        <div class="day-date">{{ formatDate(day.date) }}</div>
                        <div class="day-weather">{{ day.text }}</div>
                        <div class="day-temp">
                            <span class="max-temp">{{ day.maxTemp }}°</span>
                            <span class="min-temp">{{ day.minTemp }}°</span>
                        </div>
                        <div class="day-wind">{{ day.windDir }} {{ day.windSpeed }}m/s</div>
                        <div class="day-humidity">{{ day.humidity }}%</div>
                        <div class="trend-indicator" :class="getTrendClass(index)">
                            {{ getTrendIcon(index) }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 天气预警 -->
            <div class="weather-alerts" v-if="enhancedData?.Alerts && enhancedData.Alerts.length > 0">
                <h3 class="alerts-title">天气预警</h3>
                <div class="alerts-list">
                    <div v-for="alert in enhancedData.Alerts" :key="alert.Id" class="alert-item" :class="alert.Level">
                        <div class="alert-header">
                            <span class="alert-level">{{ getAlertLevelText(alert.Level) }}</span>
                            <span class="alert-type">{{ alert.Type }}</span>
                        </div>
                        <div class="alert-content">
                            <div class="alert-title">{{ alert.Title }}</div>
                            <div class="alert-description">{{ alert.Description }}</div>
                        </div>
                        <div class="alert-time">{{ formatDateTime(alert.Time) }}</div>
                    </div>
                </div>
            </div>

            <!-- 查看详情按钮 -->
            <div class="view-details">
                <button @click="showDetailModal = true" class="detail-btn">
                    查看详细预报
                </button>
            </div>
        </div>

        <!-- 详情模态框 -->
        <div v-if="showDetailModal" class="modal-overlay" @click="showDetailModal = false">
            <div class="modal-content" @click.stop>
                <div class="modal-header">
                    <h3>详细天气预报</h3>
                    <button @click="showDetailModal = false" class="modal-close">×</button>
                </div>
                <div class="modal-body">
                    <!-- 小时预报 -->
                    <div class="hourly-forecast" v-if="weatherData.forecast && weatherData.forecast.length > 0">
                        <h4 class="hourly-title">24小时预报</h4>
                        <div class="hourly-grid">
                            <div v-for="(hour, index) in getHourlyForecast()" :key="index" class="hourly-item">
                                <div class="hourly-time">{{ hour.time }}</div>
                                <div class="hourly-icon">{{ hour.icon }}</div>
                                <div class="hourly-temp">{{ hour.temp }}°</div>
                                <div class="hourly-text">{{ hour.text }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- 天气趋势分析 -->
                    <div class="weather-trends" v-if="enhancedData?.WeatherTrends">
                        <h4 class="trends-title">天气趋势分析</h4>
                        <div class="trends-content">
                            <div class="trend-item">
                                <span class="trend-label">温度趋势:</span>
                                <span class="trend-value">{{ enhancedData.WeatherTrends.TemperatureTrend }}</span>
                            </div>
                            <div class="trend-item">
                                <span class="trend-label">湿度趋势:</span>
                                <span class="trend-value">{{ enhancedData.WeatherTrends.HumidityTrend }}</span>
                            </div>
                            <div class="trend-item">
                                <span class="trend-label">风速趋势:</span>
                                <span class="trend-value">{{ enhancedData.WeatherTrends.WindSpeedTrend }}</span>
                            </div>
                            <div class="trend-item">
                                <span class="trend-label">变化幅度:</span>
                                <span class="trend-value">{{ enhancedData.WeatherTrends.ChangeAmplitude }}</span>
                            </div>
                            <div class="trend-item">
                                <span class="trend-label">预测建议:</span>
                                <span class="trend-value">{{ enhancedData.WeatherTrends.PredictionAdvice }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { WeatherData } from '@/services/weatherService'

interface Props {
    weatherData: WeatherData
    enhancedData?: any // 增强版天气数据
}

const props = withDefaults(defineProps<Props>(), {
    enhancedData: undefined
})

const emit = defineEmits<{
    changeCity: [city: string]
}>()

const showDetailModal = ref(false)
const selectedCity = ref('')

// 切换城市
const changeCity = () => {
    if (selectedCity.value.trim()) {
        emit('changeCity', selectedCity.value.trim())
        selectedCity.value = ''
    }
}

// 格式化日期时间
const formatDateTime = (dateString: string) => {
    if (!dateString) return '--'
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}

const formatDate = (dateString: string) => {
    if (!dateString) return '--'
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
}

// 获取天气图标
const getWeatherIcon = (weatherText: string) => {
    if (!weatherText) return '🌤️'
    const iconMap: Record<string, string> = {
        '晴天': '☀️',
        '多云': '⛅',
        '阴天': '☁️',
        '小雨': '🌦️',
        '中雨': '🌧️',
        '大雨': '⛈️',
        '小雪': '🌨️',
        '中雪': '❄️',
        '大雪': '暴雪',
        '雾': '🌫️',
        '霾': '😷'
    }
    return iconMap[weatherText] || '🌤️'
}

// 获取天气图标CSS类
const getWeatherIconClass = (weatherText: string) => {
    if (!weatherText) return ''
    const classMap: Record<string, string> = {
        '晴天': 'weather-sunny',
        '多云': 'weather-cloudy',
        '阴天': 'weather-overcast',
        '小雨': 'weather-light-rain',
        '中雨': 'weather-rain',
        '大雨': 'weather-heavy-rain',
        '小雪': 'weather-light-snow',
        '中雪': 'weather-snow',
        '大雪': 'weather-heavy-snow',
        '雾': 'weather-fog',
        '霾': 'weather-haze'
    }
    return classMap[weatherText] || ''
}

// 获取体感温度
const getFeelsLikeTemp = () => {
    if (!props.weatherData.current?.temp) return '--'
    const temp = props.weatherData.current.temp
    const humidity = props.weatherData.current.humidity || 50
    const windSpeed = props.weatherData.current.windSpeed || 0

    // 简单的体感温度计算
    let feelsLike = temp
    if (humidity > 70) feelsLike += 2
    if (windSpeed > 5) feelsLike -= 1
    if (temp < 0 && windSpeed > 3) feelsLike -= 3

    return Math.round(feelsLike)
}

// 获取空气质量CSS类
const getAirQualityClass = () => {
    const aqi = props.enhancedData?.AirQuality?.AQI
    if (!aqi) return ''
    if (aqi <= 50) return 'excellent'
    if (aqi <= 100) return 'good'
    if (aqi <= 150) return 'moderate'
    if (aqi <= 200) return 'poor'
    if (aqi <= 300) return 'very-poor'
    return 'hazardous'
}

// 获取紫外线指数CSS类
const getUVIndexClass = () => {
    const uvi = props.enhancedData?.UVIndex?.Index
    if (!uvi) return ''
    if (uvi <= 2) return 'low'
    if (uvi <= 5) return 'moderate'
    if (uvi <= 7) return 'high'
    if (uvi <= 10) return 'very-high'
    return 'extreme'
}

// 获取预警级别文本
const getAlertLevelText = (level: string) => {
    const levelMap: Record<string, string> = {
        'info': '蓝色预警',
        'warning': '黄色预警',
        'danger': '红色预警'
    }
    return levelMap[level] || '未知预警'
}

// 获取趋势CSS类
const getTrendClass = (index: number) => {
    if (index === 0) return 'trend-today'
    if (index === 1) return 'trend-tomorrow'
    return 'trend-future'
}

// 获取趋势图标
const getTrendIcon = (index: number) => {
    if (index === 0) return '📅'
    if (index === 1) return '📆'
    return '📊'
}

// 获取小时预报
const getHourlyForecast = () => {
    if (!props.weatherData.forecast || props.weatherData.forecast.length === 0) {
        return []
    }

    // 模拟24小时数据
    const hourlyData = []
    for (let i = 0; i < 24; i++) {
        const hour = (i + 6) % 24
        const temp = props.weatherData.current?.temp || 20
        const variation = Math.sin(i * 0.3) * 5

        hourlyData.push({
            time: `${hour.toString().padStart(2, '0')}:00`,
            icon: getWeatherIcon(props.weatherData.current?.text || '晴天'),
            temp: Math.round(temp + variation),
            text: props.weatherData.current?.text || '晴天'
        })
    }

    return hourlyData
}
</script>

<style scoped>
.weather-display {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.weather-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 40px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

/* 主要天气信息区域布局 */
.weather-main-section {
    display: flex;
    gap: 60px;
    margin: 40px 0;
    align-items: flex-start;
    justify-content: space-between;
}

.weather-left {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.weather-right {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
}

.weather-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.city-name {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.update-time {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 5px 0 0 0;
}

.location-info {
    display: flex;
    align-items: center;
    margin-top: 5px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.location-icon {
    margin-right: 5px;
}

.weather-icon {
    font-size: 4rem;
    position: relative;
}

.weather-icon-large {
    font-size: 6rem;
    margin-bottom: 20px;
    animation: weather-float 3s ease-in-out infinite;
}

@keyframes weather-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.weather-icon .icon {
    display: inline-block;
    transition: all 0.3s ease;
}

.weather-icon .icon:hover {
    transform: scale(1.1);
}

/* 天气图标动画类 */
.weather-icon-sunny {
    animation: sunny-rotate 20s linear infinite;
}

.weather-icon-partly-cloudy {
    animation: cloud-float 8s ease-in-out infinite;
}

.weather-icon-cloudy {
    animation: cloud-move 12s linear infinite;
}

.weather-icon-rain {
    animation: rain-fall 2s linear infinite;
}

.weather-icon-snow {
    animation: snow-fall 3s linear infinite;
}

@keyframes sunny-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes cloud-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes cloud-move {
    from {
        transform: translateX(-20px);
    }

    to {
        transform: translateX(20px);
    }
}

@keyframes rain-fall {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}

@keyframes snow-fall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(10px) rotate(360deg);
        opacity: 0;
    }
}

.current-weather {
    text-align: center;
    margin-bottom: 40px;
}

.temperature {
    margin-bottom: 20px;
}

.temp-value {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.temp-unit {
    font-size: 2rem;
    font-weight: 500;
}

.feels-like {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 15px;
}

.weather-text {
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.95;
}

.weather-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.3);
}

.label {
    font-weight: 500;
    opacity: 0.9;
}

.value {
    font-weight: 600;
}

/* 新增：天气指数样式 */
.weather-indices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.index-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.index-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
}

.index-icon {
    font-size: 2rem;
    margin-right: 15px;
}

.index-content {
    flex: 1;
}

.index-title {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 5px;
}

.index-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.index-level {
    font-size: 0.8rem;
    font-weight: 500;
}

/* 空气质量等级样式 */
.air-quality.excellent {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.air-quality.good {
    background: linear-gradient(135deg, #8BC34A, #7CB342);
}

.air-quality.moderate {
    background: linear-gradient(135deg, #FFC107, #FFB300);
}

.air-quality.poor {
    background: linear-gradient(135deg, #FF9800, #F57C00);
}

.air-quality.very-poor {
    background: linear-gradient(135deg, #F44336, #D32F2F);
}

.air-quality.hazardous {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

/* 紫外线指数等级样式 */
.uv-index.low {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.uv-index.moderate {
    background: linear-gradient(135deg, #FFC107, #FFB300);
}

.uv-index.high {
    background: linear-gradient(135deg, #FF9800, #F57C00);
}

.uv-index.very-high {
    background: linear-gradient(135deg, #F44336, #D32F2F);
}

.uv-index.extreme {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

/* 生活指数样式 */
.life-indices {
    margin-bottom: 30px;
}

.indices-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.indices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.life-index-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.life-index-item:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.life-index-icon {
    font-size: 2rem;
    margin-right: 15px;
}

.life-index-content {
    flex: 1;
}

.life-index-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.life-index-desc {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.4;
}

.weather-forecast {
    margin-top: 30px;
}

.forecast-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.forecast-day {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.forecast-day:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.day-date {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    opacity: 0.9;
}

.day-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.day-temp {
    margin-bottom: 10px;
}

.max-temp {
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 5px;
}

.min-temp {
    font-size: 1rem;
    opacity: 0.8;
}

.day-text {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.day-details {
    font-size: 0.8rem;
    opacity: 0.8;
}

.detail {
    margin: 2px 0;
}

.trend-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.trend-today {
    color: #FFD700;
}

.trend-tomorrow {
    color: #87CEEB;
}

.trend-future {
    color: #DDA0DD;
}

/* 天气趋势图表样式 */
.weather-trends {
    margin-top: 30px;
}

.trends-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.trends-chart {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
}

.chart-container {
    position: relative;
    height: 100px;
    margin: 20px 0;
}

.chart-line {
    position: relative;
    height: 100%;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.chart-point {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
}

.point-temp {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    white-space: nowrap;
}

.point-line {
    width: 2px;
    height: 20px;
    background: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
}

/* 模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 20px;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
}

.modal-title {
    margin: 0;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}

.modal-body {
    padding: 30px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.detail-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}

.card-title {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

.card-content {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.temp-range {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.max {
    color: #e74c3c;
}

.separator {
    color: #666;
}

.min {
    color: #3498db;
}

.weather-text {
    color: #2c3e50;
}

.wind-dir {
    color: #27ae60;
}

.wind-speed {
    color: #f39c12;
}

.humidity {
    color: #3498db;
}

.precip {
    color: #9b59b6;
}

/* 新增：小时预报样式 */
.hourly-forecast {
    margin-top: 30px;
}

.hourly-title {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.hourly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
}

.hourly-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.hourly-time {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 8px;
}

.hourly-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.hourly-temp {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.hourly-text {
    font-size: 0.7rem;
    color: #666;
}

/* 城市选择器样式 */
.city-selector {
    margin-bottom: 30px;
    padding: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    color: white;
    width: 100%;
}

.city-input-group {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}

.city-input {
    flex: 3;
    padding: 14px 18px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}

.city-input:focus {
    outline: none;
    background: white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.change-city-btn {
    flex: 1;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.change-city-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.current-city-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.city-icon {
    font-size: 18px;
}

.city-name {
    font-weight: 600;
    font-size: 18px;
}

.last-updated {
    margin-left: auto;
    font-size: 14px;
    opacity: 0.8;
}

/* 加载状态样式 */
.loading-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.loading-spinner {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: spin 2s linear infinite;
}

.loading-text {
    font-size: 1.1rem;
    color: #999;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .weather-display {
        padding: 15px;
    }

    .weather-card {
        padding: 20px;
    }

    .weather-main-section {
        flex-direction: column;
        gap: 20px;
    }

    .weather-left {
        order: 1;
    }

    .weather-right {
        order: 2;
    }

    .temp-value {
        font-size: 3.5rem;
    }

    .weather-icon-large {
        font-size: 4rem;
    }

    .city-selector {
        padding: 15px;
    }

    .city-input-group {
        flex-direction: column;
        gap: 10px;
    }

    .city-name {
        font-size: 2rem;
    }

    .weather-details {
        grid-template-columns: 1fr;
    }

    .weather-indices {
        grid-template-columns: 1fr;
    }

    .indices-grid {
        grid-template-columns: 1fr;
    }

    .forecast-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .hourly-grid {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    }
}
</style>